import { h, Component } from 'preact';
import s from './Part06.scss';
import classNames from 'classnames';
import SwipeableViews from 'react-swipeable-views';
import info from './info.jpg';

const data = [{
	name: '投资风险'
}, {
	name: '投资金额'
}, {
	name: '物业要求'
}, {
	name: '结算方式'
}, {
	name: '筹建工期'
}, {
	name: '人房比'
}, {
	name: '能耗+洗涤'
}, {
	name: '入住模式'
}, {
	name: '入住率'
}, {
	name: '消费客群'
}, {
	name: '订单时长'
}, {
	name: '平台渠道'
}, {
	name: '回报周期'
}]


class Part06 extends Component {

	constructor(props){
		super(props);
		this.state = {
			index: 0,
			list: data
		}
	}

	// animateHeight: false,
  // animateTransitions: true,
  // axis: 'x',
  // disabled: false,
  // disableLazyLoading: false,
  // enableMouseEvents: false,
  // hysteresis: 0.6,
  // ignoreNativeScroll: false,
  // index: 0,
  // threshold: 5,
  // springConfig: {
  //   duration: '0.35s',
  //   easeFunction: 'cubic-bezier(0.15, 0.3, 0.25, 1)',
  //   delay: '0s',
  // },
	// resistance: false,

	onChange = (e) => {
		this.setState({
			index: e
		});
	}

	handletitle = (ind) => () => {
		this.setState({
			index: ind
		})
	}

	render() {
		return (
			<div>
				<ul className={`${s.titlebar} clearfix`}>
					{
						this.state.list.map((item, ind) => (
							<li
								className={ind === this.state.index ? s.select:''}
								onClick={this.handletitle(ind)}
							>
								<span>{item.name}</span>
							</li>))
					}
				</ul>
				<div className={s.info}><img src={info} /></div>
				<ul className={s.tags}>
					{
						this.state.list.map((item, i) => (
							<li className={
								classNames({
									op1: i === this.state.index,
									op06: i === this.state.index - 1 || i === this.state.index + 1,
									op04: i === this.state.index - 2 || i === this.state.index + 2
								})
							}/>
						))
					}
				</ul>
				<SwipeableViews index={this.state.index} onChangeIndex={this.onChange} style={{padding: '0.5rem 3rem'}}>
					{
						this.state.list.map((item, index) => (
							<div className={`${s.page} bg-green ${index === this.state.index ? s.select : ''}`} />
						))
					}
				</SwipeableViews>
			</div>
		);
	}
}

export default Part06;
